<script setup lang="ts">
import HeaderView from '@/components/HeaderView.vue'
import MenuAdmin from '@/components/MenuAdmin.vue'
import { useCommonStore } from '@/store/main'
import $mitt from '@/common/emitter'
import { INJECT_THEME_COLOR } from '@/common/provideType'

const $store = useCommonStore()
const THEME_COLOR = inject(INJECT_THEME_COLOR)
const menuMinFlag = ref(false)

const gotoAdminFn = () => $mitt.emit('HANDLE_GO_TO_ADMIN_FN')

onMounted(() => {
	$mitt.on('USER_POSITION', positionArr => $store.setPosiList(positionArr as string[]))
	$mitt.on('MENU_MIN_FLAG', status => menuMinFlag.value = status as boolean)
})
onBeforeRouteLeave(() => {
	// 清楚位置缓存
	$store.setPosiList([])
})
onBeforeUnmount(() => {
	$mitt.all.delete('USER_POSITION')
	$mitt.all.delete('MENU_MIN_FLAG')
})
</script>

<template>
	<main class="admin-main">
		<div :class="[`admin-menu ${menuMinFlag ? 'active' : ''} bg-${THEME_COLOR}`]">
			<MenuAdmin />
		</div>
		<section :class="[`admin-main-in ${menuMinFlag ? 'active' : ''}`]">
			<header class="admin-header">
				<HeaderView />
			</header>
			<div class="admin-cont">
				<div class="curr-posi-bar">
					<el-icon><Location /></el-icon>
					<span @click="gotoAdminFn" class="pointer">首页</span>
					<template v-if="$store.posiList.arr.length">
						<span v-for="(item, index) in $store.posiList.arr" :key="index">
							<el-icon class="ml-5 mr-5"><ArrowRight /></el-icon>
							{{ item }}
						</span>
					</template>
				</div>
					
				<router-view/>
			</div>
		</section>
	</main>
</template>

<style lang="scss" scoped>
.bg-night {
	background-color: #181e45;
}
%flex-base-set {
	display: -webkit-flex;
	display: flex;
}
%flex-column {
	flex-direction: column;
}
%flex-column-set {
	@extend %flex-base-set;
	@extend %flex-column;
}
/*左侧菜单滚动条美化*/
::-webkit-scrollbar {width: .08rem;height: .04rem;}
::-webkit-scrollbar-track-piece {-webkit-border-radius: .04rem}
::-webkit-scrollbar-thumb {height: .5rem;-webkit-border-radius: .04rem;background-color: #424a7d;outline-offset: -.02rem;-webkit-opacity: 0.95;opacity: 0.95;}
::-webkit-scrollbar-thumb:hover {height: .5rem;background-color: #575f95;-webkit-border-radius: .04rem;}

.admin-main {
	height: 100%;

	.admin-menu {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		width: 2rem;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		transition: width .5s;
		-webkit-transition: width .5s;
		&.active {
			width: .5rem;
		}
	}
	.admin-header {
		height: .5rem;
	}
	.admin-main-in {
		padding-left: 2rem;
		transition: padding-left .5s;
		-webkit-transition: padding-left .5s;
		&.active {
			padding-left: .5rem;
		}
	}
	.admin-cont {
		padding: .1rem .15rem;
		:deep(.page-cont) {
			@extend %flex-base-set;
			padding-left: .15rem;
			padding-right: .15rem;
		}
		.curr-posi-bar {
			margin-bottom: .1rem;
			padding: .05rem 0;
			font-size: .12rem;
			.el-icon {
				margin-right: .05rem;
				font-size: .14rem;
			}
		}
	}
}
</style>